<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<%@include file="../common/header.jsp"%>
<title>用户中心</title>
</head>

<body>
<%@include file="../common/common_top.jsp"%>
<!--导航栏样式-->
<div id="Menu" class="clearfix">
<div class="Menu_style">
  <div id="allSortOuterbox" class="display">
    <div class="Category"><a href="/TeaShop/home/product/list" class="Menu_img"><em></em></a></div>
    <div class="hd_allsort_out_box_new">
	 <!--左侧栏目开始-->
	 <div class="Menu_list">	
	    <div class="menu_title">茶叶品种</div>
       		 <c:forEach items="${teaCategoryList}" var="teaCategory">
				<a href="${teaCategory.href}">${teaCategory.name}</a>
			 </c:forEach>
	</div>	
    <div class="Menu_list">	
	    <div class="menu_title">茶叶价格</div>
        <a href="/TeaShop/home/product/list?price=1&flag2=1">100以下</a><a href="/TeaShop/home/product/list?price=2&flag2=1">100-200</a>
        <a href="/TeaShop/home/product/list?price=3&flag2=1">200-400</a><a href="/TeaShop/home/product/list?price=4&flag2=1">400-600</a>
        <a href="/TeaShop/home/product/list?price=5&flag2=1">600-100</a><a href="/TeaShop/home/product/list?price=6&flag2=1">1000以上</a>
	</div>	
     <div class="Menu_list">	
	    <div class="menu_title">推荐茶叶</div>
        <ul class="recommend">
            <c:set var="count" value="0"></c:set>
            <c:forEach items="${teaListByActionId}" var="tea">
               		<!-- 只允许显示2个 -->
               		<c:if test="${count < 2}">
	         			 	<li><a href="${tea.href}" title="${tea.name}">${tea.name}</a></li>
	               		  	<c:set var="count" value="${count+1}"></c:set>
         			</c:if>
         	</c:forEach>
        </ul>
	</div>	
	</div>		
	</div>
    <div class="Navigation" id="Navigation">
		 <ul class="Navigation_name">
			<li><a class="nav_on" id="mynav"  href="/TeaShop/home/system/index"><span>首页</span></a></li>
			 <c:forEach items="${teaCategoryList}" var="teaCategory">
				<li><a class="nav_on" id="mynav"  href="${teaCategory.href}"><span>${teaCategory.name}</span></a></li>
			</c:forEach>
		 </ul>			 
		</div>
    <!--购物车-->	
    
     <div class="hd_Shopping_list" id="Shopping_list">
   <div class="s_cart"><em></em><a href="#">我的购物车</a> <i class="ci-right">&gt;</i><i class="ci-count" id="shopping-amount">${cartTotal}</i></div>
   <div class="dorpdown-layer">
        <div class="spacer"></div>
	 <!--<div class="prompt"></div><div class="nogoods"><b></b>购物车中还没有商品，赶紧选购吧！</div>-->
	 <ul class="p_s_list">
	 
	 	 <c:set var="totalPrice" value="0"></c:set>
 		 <c:forEach items="${cartList}" var="cart" varStatus="vs">
			  <li>
			    <div class="img"><img src="${cart.tea.photo}" style="width:40px;height:40px;"></div>
			    <div class="content">
			      <p><a href="${cart.tea.href}">${cart.tea.name}</a></p><p>${cart.tea.info}</p>
			    </div>
				<div class="Operations">
				<p class="Price">￥${cart.tea.new_price}</p>
				<p>数量：${cart.num}</p></div>
			  </li>
			   <c:set var="totalPrice" value="${totalPrice+cart.tea.new_price*cart.num}"></c:set>
		 </c:forEach>
		  
	</ul>		
	 <div class="Shopping_style">
	 <div class="p-total">共<b>${cartTotal}</b>件商品　共计<strong>￥ ${totalPrice}</strong></div>
	  <a href="/TeaShop/home/shopping/cart" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
	 </div>	 
   </div>	
  </div>
</div>
</div>
<!--用户中心-->
<div class="user_style clearfix" id="user">
<div class="user_title"><em></em>用户中心</div>
  <div class="clearfix user" >
    <div class="user_left">
      <div class="user_info">
       <div class="Head_portrait"><img id="photo_center" name="photo" src="../../resources/home/images/people.png"  width="80px" height="80px"/><!--头像区域--></div>
       <div class="user_name">${account.username}<a href="/TeaShop/home/account/info">[个人资料]</a></div>
      </div>
      <ul class="Section">
       <li><a href="/TeaShop/home/account/info"><em></em><span>个人信息</span></a></li>
       <li><a href="/TeaShop/home/account/password"><em></em><span>修改密码</span></a></li>
       <li><a href="/TeaShop/home/account/order?page=1&rows=7"><em></em><span>我的订单</span></a></li>
       <li><a href="/TeaShop/home/account/comment?page=1&rows=4"><em></em><span>我的评论</span></a></li>
       <li><a href="/TeaShop/home/account/collect?page=1&rows=4&accountId=${account.id}"><em></em><span>我的收藏</span></a></li>
       <li><a href="/TeaShop/home/account/address"><em></em><span>收货地址管理</span></a></li>
      </ul>
    </div>
    <div class=" right_style r_user_style">
      <div class="user_Borders">
       <div class="title_name">
        <span class="name">个人信息设置</span>
       </div>
       <div class="about_user_info">
        <form id="edit_account_form"  method="post" >   
           <input type="hidden" name="id" id="edit-id" value="${account.id}" />
           <input type="hidden" name="photo" id="hidden-photo" value="../../resources/home/images/people.png" />
	       <div class="user_layout">
		         <ul >
		          <li><label class="user_title_name" style="line-height:80px">用户头像：</label><img style="float:left;" id="preview-photo"  src="../../resources/home/images/people.png" width="80px" height="80px" >
		          	  <a style="float:left;margin-top:35px;margin-left:35px;" href="javascript:void(0)" onclick="uploadPhoto()" ><input type="button" value="上传图片" /></a>
		          </li>
		          <br><br><br>
		          <li><label class="user_title_name">用户昵称：</label><input id="username" name="username" type="text"  class="add_text"/></li>
		          <li><label class="user_title_name">真实姓名：</label><input id="realname" name="realname" type="text"  class="add_text"/></li>
		          <li><label class="user_title_name">用户性别：</label>
		          		<label class="sex"><input id="unknow" name="sex" type="radio" value="0"/><span>未知</span></label>                
		                <label class="sex"> <input id="male" name="sex" type="radio"  value="1"/><span>男</span></label>
		                <label class="sex"><input id="female" name="sex" type="radio" value="2"/><span>女</span></label> 
		          </li>
		          <li><label class="user_title_name">手&nbsp;机&nbsp;号：</label><input id="phone" name="phone" type="text"  class="add_text"/></li>
		          <li><label class="user_title_name">邮箱地址：</label><input id="email" name="email" type="text"  class="add_text"/></li>         
		         </ul>
		         <div class="operating_btn">
		         		 <a href="javascript:;" onclick="submitEditAccount();"><input type="button" value="提交" style="border:0px; background:url(../../resources/home/images/Button_img.png) no-repeat; height:37px; 
				text-align:center;width:270px; font-size:18px; color:#FFF;cursor:pointer" class="submit—btn"/></a>
		         </div>
	         </div>
         </form>
       </div>
      </div>
    </div>
  </div>
</div>

<%@include file="../common/footer.jsp"%>
</body>
<script>

//编辑信息加载时候自动赋值
window.onload=function(){
	$("#username").val("${account.username}");
	$("#realname").val("${account.realname}");
	$("#phone").val("${account.phone}");
	$("#email").val("${account.email}");
	$("#hidden-photo").val("${account.photo}");
	$("#preview-photo").attr('src','${account.photo}');
	$("#photo_center").attr('src','${account.photo}');
	if (${account.sex} == 0) {
		$('#unknow').attr("checked", "checked");
	}
	if(${account.sex} == 1)
	{
		$('#male').attr("checked", "checked");
	}
	if(${account.sex} == 2)
	{
		$('#female').attr("checked", "checked");
	}
};


function addFavorite(url, title) {
	try {
		window.external.addFavorite(url, title);
	} catch (e){
		try {
			window.sidebar.addPanel(title, url, '');
        	} catch (e) {
			alert("请按 Ctrl+D 键添加到收藏夹", 'notice');
		}
	}
}

function upload(){
	if($("#photo-file").val() == '')return;
	var formData = new FormData();
	//选中所选图片第一个
	formData.append('photo',document.getElementById('photo-file').files[0]);
	$.ajax({
		url:'/TeaShop/home/account/upload_photo',
		type:'post',
		data:formData,
		contentType:false,
		processData:false,
		success:function(data){
			if(data.type == 'success'){
				$("#preview-photo").attr('src',data.filepath);
				$("#hidden-photo").val(data.filepath);
				$.messager.alert("消息提醒",data.msg,"info");
			}else{
				$.messager.alert("消息提醒",data.msg,"warning");
			}
		},
		error:function(data){
			$.messager.alert("消息提醒","上传失败!","warning");
		}
	});
}

function uploadPhoto(){
	$("#photo-file").click();
	
}

function submitEditAccount()
{
	if($("#username").val() == ''){
		$.messager.alert("消息提醒", "用户名不能为空!", "warning");
		return;
	}
	if($("#realname").val() == ''){
		$.messager.alert("消息提醒", "真实姓名不能为空!", "warning");
		return;
	}
	
	if($("#phone").val() == ''){
		$.messager.alert("消息提醒", "电话不能为空!", "warning");
		return;
	}
	if($("#email").val() == ''){
		$.messager.alert("消息提醒", "电子邮箱不能为空!", "warning");
		return;
	}
	
	
	
	
	var data = $("#edit_account_form").serialize();
	
	console.log(data);
	
	$.ajax({
		type: "post",
		url: "/TeaShop/home/account/edit_info",
		data: data, 
		dataType: "json", //返回数据类型
		success: function(result){
			if(result.type == 'success'){
			
            	$.messager.alert("消息提醒", result.msg, "info", function () {window.location.href = "/TeaShop/home/account/info";});
			}
			else{
				$.messager.alert("消息提醒", result.msg, "warning");
			}
			
		} 
		
	}); 
	
}






</script>
</html>